<template>
	
	<div style="position:relative">
		<div class="col-lg-12">
			<div id="reportrange" class="form-control">
				<div class="block">              
					<el-row class="mar-row">
						<el-col :xs="24" :sm="24" :lg="24">
								<el-radio  class="mar-l marFlex">选择项目:</el-radio>
								<el-select @change="handleChange1" class="select" v-model="selected" filterable placeholder="Spark">
									<el-option
									v-for="item in options2"
									:key="item.value"
									:label="item.label"    
									:value="item.label">
									</el-option>
								</el-select>  
						</el-col>
					</el-row>
																		
				</div>           
			</div>
        <el-row>
            <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
        </el-row>
    </div>
	
		<el-upload
		:action="getActionUrl()"
		:on-success="uploadSuccess"
		:on-error="uploadFail"
		:on-change="handleChange"
		:before-upload="beforeUpload"
		:show-file-list="false"
		:headers="headers"
		style="display:inline;margin-bottom: -31px;position:absolute;right:150px"
		> 
			<el-button size="small" type="primary" icon="el-icon-upload2" :loading="loading" >上传统计文件</el-button>
		</el-upload>

		<el-upload
		:action="getActionUrl1()"
		:on-success="uploadSuccess"
		:on-error="uploadFail"
		:on-change="handleChange"
		:before-upload="beforeUpload"
		:show-file-list="false"
		:headers="headers"
		style="display:inline;text-align: right;margin-bottom:20px;display:inlineblock;margin-top:-34px"
		> 
			<el-button size="small" type="primary" icon="el-icon-upload2" :loading="loading">上传mapping文件</el-button>
		</el-upload>
		
	
		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<div style="float: left; padding: 10px 0">工程师输出统计</div>
				<el-radio-group @change="dateChange" v-model="selectedDate" style="float: right; padding: 3px 0" size="mini">
                    <el-radio-button label="本日"></el-radio-button>
                    <el-radio-button label="本周"></el-radio-button>
                    <el-radio-button label="历史"></el-radio-button>
                </el-radio-group>
			</div>
			<div v-loading="loading" element-loading-text="文件上传中">
				<div v-if="list.length == 0" style="text-align: center;color:#909399">暂无数据</div>
				<el-tabs v-else v-model="active" type="card" @tab-click="changeGroup">
					<el-tab-pane v-for="(item,index) in list" :key="index" :label="'第'+ (index+1) + '组'" :name="'active'+(index+1)">
						<ve-bar :ref="'vbar'+index" :data="item" :settings="chartSettings" :extend="topExtend"></ve-bar>
					</el-tab-pane>
				</el-tabs>   
			</div>
		</el-card>

		<el-card class="box-card m-b" shadow="never" style="margin-bottom:20px">
			<div slot="header" class="clearfix">
				<span>风险任务（未及时处理）</span>
			</div>
			<div v-loading="loading" element-loading-text="文件上传中">
				<el-col :xs="24" :sm="24" :lg="6" class="form">
					<el-input v-model="risk_keywords" placeholder="输入关键字搜索"><el-button type="success" size="mini">搜索</el-button></el-input>
					<el-button class="search" @click="get_table_data" type="primary" size="mini">搜索</el-button>                       
				</el-col>
				<el-table
					:data="risk_task"
					:border="true"
					:header-cell-style="{background:'#eef1f6'}"
					style="width: 100%; margin-bottom: 20px"
				>
					<el-table-column align="center" prop="id" label="ID" sortable></el-table-column>
					<el-table-column align="center" prop="tracker" label="类型" sortable></el-table-column>
					<el-table-column align="center" prop="project" label="项目名称" sortable></el-table-column>
					<el-table-column align="center" prop="priority" label="优先级" sortable></el-table-column>
					<el-table-column align="center" prop="status" label="状态" sortable></el-table-column>
					<el-table-column align="center" prop="last_updated_by" label="更新人" sortable></el-table-column>
					<el-table-column align="center" prop="updated" label="更新时间" sortable></el-table-column>
				</el-table>
				<el-pagination
					@size-change="handleSizeChange1"
					@current-change="handleCurrentChange1"
					:current-page="currentPage1"
					:page-sizes="[10, 15, 50, 100]"
					:page-size="currentSize1"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataCount1"
				></el-pagination>
			</div>
		</el-card>

        <el-card class="box-card m-b" shadow="never">
			<div slot="header" class="clearfix">
				<span>工作看板</span>
			</div>
			<div v-loading="loading" element-loading-text="文件上传中">
				<el-table
					:data="work_kanban"
					:border="true"
					:header-cell-style="{background:'#eef1f6'}"
					style="width: 100%; margin-bottom: 20px"
				>
					<el-table-column align="center" prop="username" label="姓名"></el-table-column>
					<el-table-column align="center" prop="team" label="Team">
						<template slot-scope="scope">
							{{scope.row.team?scope.row.team:'无'}}
						</template> 
					</el-table-column>
					<el-table-column align="center" prop="task" label="Task"></el-table-column>
					<el-table-column align="center" prop="bug" label="Bug"></el-table-column>
					<el-table-column align="center" prop="due_num" label="即将到期">
                        <template slot-scope="scope">
							<span @click="handleClick(scope.row)" style="cursor: pointer;color: red">{{scope.row.due_num}}</span>
						</template>
                    </el-table-column>
				</el-table>
				<el-pagination
					@size-change="handleSizeChange2"
					@current-change="handleCurrentChange2"
					:current-page="currentPage2"
					:page-sizes="[10, 15, 50, 100]"
					:page-size="currentSize2"
					layout="total, sizes, prev, pager, next, jumper"
					:total="dataCount2"
				></el-pagination>
			</div>
		</el-card>
		<el-dialog :visible.sync="dialog1">
			<el-table 
				:header-cell-style="{background:'#eef1f6'}"
				style="width: 100%" 
				:data="initTable.slice((initCurrent-1)*initSize, initCurrent*initSize)"
				:border="true">
				<el-table-column 
				align="center" 
				prop="id" 
				label="ID" 
				>
				</el-table-column>
				<el-table-column 
				align="center" 
				prop="due_date" 
				label=到期时间 
				>
				</el-table-column>
				<el-table-column 
				align="center" 
				prop="status" 
				label="状态">
				</el-table-column>
				<el-table-column 
				align="center" 
				prop="product_manager" 
				label="更新人">
				</el-table-column>
				<el-table-column 
				align="center" 
				prop="updated" 
				label="更新时间">
				</el-table-column>
			</el-table>
			<el-pagination class="marT"
				v-show="initTotal > 10"
				:page-size="initSize"
				background                              
				@size-change="initSizeChange"
				@current-change="initCurrentChange"
				:current-page="initCurrent"                               
				layout="prev, pager, next"
				style="text-align: center"
				:total="initTotal">
			</el-pagination>
			</el-dialog>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getToken, getName, removeToken, removeName } from '@/utils/auth'
import { pagingData,DateUtil } from './utils.js';
import common from '@/components/devops/get_data';
import { getHeader } from '@/app.config';
import 'v-charts/lib/style.css';
import 'echarts/lib/component/dataZoom';
export default {
	props: {
		params: Object,
	},
	components: {
	},
	created() {        
        this.getOptions()                                   
    },
	data() {
		this.dataZoom = [
			{
				type: 'slider',
				start: 0,
				end: 100,
			},
		];
		let pro = 'Spark'
		return {
			is_mapping:true,
			proName:'Spark',
			token: getToken(),
            userName: getName(),
            selected: '',
            value2: [],
            radio: true,                         
            options2: [],
            auth: true,
            user_datetime: Object,
			common,
			list: [],
			active: 'active1',
			dialog1: false,
			initTable: [],
			initLoading: false,
			initCurrent: 1,
			initSize: 10,
			initTotal: 0,
			selectedDate: '本日',
			currentPage1: 1,
			currentSize1: 10,
			tableData1: [],
			currentPage2: 1,
			currentSize2: 10,
			tableData2: [],
			dataCount1: 0,
			dataEmpty1: true,
			dataCount2: 0,
			dataEmpty2: true,
			topChartData: {
				columns: ['project_name', 'version_release', 'release_version_release', 'daily_version_release'],
				rows: [],
			},
			topExtend: {
				series: {
					barMaxWidth: 20,
				},
			},
			chartSettings: {
				labelMap: {
                    bug_num: 'Bug(个)',
                    todo_num: 'Todo(个)',
                    all: '总计(个)',
				},
				// dataOrder: {
				// 	label: 'all',
				// 	order: 'desc',
				// },
			},
			enginner_output: {
				columns: ['username', 'bug_num', 'todo_num', 'all'],
				rows: [],
			},
			risk_task: [],
			risk_keywords: '',
			work_kanban: [],
			fileList: [],
			headers: getHeader(),
			loading: false,
		};
	},
	methods: { 
		getActionUrl1() {
			return `${process.env.VUE_APP_KANBAN_HOST}/api/resource/kyocera/uploadfile?project=${this.proName}&is_mapping=${this.is_mapping}`
		},
		getActionUrl() {
			return `${process.env.VUE_APP_KANBAN_HOST}/api/resource/kyocera/uploadfile?project=${this.proName}`
		},
		handleChange1(value) {
			this.proName = value
			console.log("this.proName",this.proName)
			const dates = DateUtil.getNowDay()
			this.init_datas(dates)      
		},
		getOptions() {
            this.$axios.get(`${process.env.VUE_APP_KANBAN_HOST}/api/account/personal_group_dept`, {headers: getHeader()})
            .then((res) => {                
                if(res.data.code === 200) {
                    this.options2 = res.data.project_info 
                } else if(res.data.code == 401) {
                    removeToken()
                    removeName()
                    this.$message.error('登陆超时或该账号已被登出，请您重新登录');
                    this.$router.push({
                        path: '/#/login'
                    })
                } else {
                    console.log('无数据')
                }
            }).catch((err) => {
                console.log(err)
            })
        }, 
		dateChange(val) {
			// console.log(111,val)
			this.selectedDate = val
            if(val == '本日') {
                const dates = DateUtil.getNowDay()
				this.init_datas(dates);
            } else if(val == '本周') {
				const dates = DateUtil.getStartDayOfWeek() + ',' + DateUtil.getEndDayOfWeek()
				// console.log(dates)
				this.init_datas(dates);
            } else {
				this.init_datas('');
			}
        },
		init_datas: function (dates) {
			this.get_init_data(dates);
			this.get_table_data();
		},
		handleSizeChange1: function (size) {
			this.currentSize1 = size;
			this.risk_task = pagingData(
				this.tableData1,
				this.dataCount1,
				this.currentPage1,
				this.currentSize1
			);
		},
		handleCurrentChange1: function (page) {
			this.currentPage1 = page;
			this.risk_task = pagingData(
				this.tableData1,
				this.dataCount1,
				this.currentPage1,
				this.currentSize1
			);
		},
		handleSizeChange2: function (size) {
			this.currentSize2 = size;
			this.work_kanban = pagingData(
				this.tableData2,
				this.dataCount2,
				this.currentPage2,
				this.currentSize2
			);
		},
		handleCurrentChange2: function (page) {
			this.currentPage2 = page;
			this.work_kanban = pagingData(
				this.tableData2,
				this.dataCount2,
				this.currentPage2,
				this.currentSize2
			);
        },
        handleClick(row) {
			this.dialog1 = true
			this.initTable = row.due_list
		},
		initCurrentChange(val) {
			this.initCurrent = val
		},
		initSizeChange(val) {
			this.initSize = val
		},
		changeGroup(tab, event) {
			this.$nextTick(() => {
				this.$refs['vbar'+ tab.index][0].echarts.resize()
			});
			
		},
		get_init_data(dates) {
			// console.log("dates",dates)
			//this.risk_task = [];
			this.work_kanban = [];
			//this.tableData1 = [];
			//this.dataEmpty1 = true;
			this.tableData2 = [];
			this.dataEmpty2 = true;
			var self = this;
			console.log(this.proName,565656)
			this.$axios
				.get(
					`${process.env.VUE_APP_KANBAN_HOST}/api/resource/kyocera/kyocerakanban?date=${dates}&project=${this.proName}`,
					{ headers: getHeader() }
				)
				.then(function (response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							self.list = []
							const list = response.data.enginner_output
							for (var i = 0; i < list.length; i=i+10) {
								var listItem = list.slice(i,i+10)
								self.list.push({
									columns: ['username', 'bug_num', 'todo_num', 'all'],
									rows: listItem,
								})
							}
							self.enginner_output.rows = self.list[0]
							//self.tableData1 = response.data.risk_task
							self.tableData2 = response.data.work_kanban

							//self.dataCount1 = response.data.risk_task.length;
							self.dataCount2 = response.data.work_kanban.length;
							//self.currentPage1 = 1;
							//self.currentSize1 = 10;
							//self.dataEmpty1 = false;
							self.currentPage2 = 1;
							self.currentSize2 = 10;
							self.dataEmpty2 = false;
							// if (self.dataCount1 === 0) {
							// 	self.risk_task = [];
							// 	self.dataEmpty1 = true;
							// } else {
							// 	self.risk_task = pagingData(
							// 		self.tableData1,
							// 		self.dataCount1,
							// 		self.currentPage1,
							// 		self.currentSize1
							// 	);
							// }

							if (self.dataCount2 === 0) {
								self.work_kanban = [];
								self.dataEmpty2 = true;
							} else {
								self.work_kanban = pagingData(
									self.tableData2,
									self.dataCount2,
									self.currentPage2,
									self.currentSize2
								);
							}
						} else if(response.data.code === 403) {
							self.$message.error('您暂无权限，请先申请权限')
							self.$router.push({
								path: '/#/'
							})
						}
					}
				})
				.catch(function (err) {
					console.log(err);
				});
		},
		get_table_data() {
			this.risk_task = [];
			this.tableData1 = [];
			this.dataEmpty1 = true;
			var self = this;
			this.$axios
				.get(
					`${process.env.VUE_APP_KANBAN_HOST}/api/resource/kyocera/kyocerasearch?keyword=${self.risk_keywords}&project=${this.proName}`,
					{ headers: getHeader() }
				)
				.then(function (response) {
					if (response.status == 200) {
						if (response.data.code === 200) {
							self.tableData1 = response.data.risk_task
							self.dataCount1 = response.data.risk_task.length;
							self.currentPage1 = 1;
							self.currentSize1 = 10;
							self.dataEmpty1 = false;
							if (self.dataCount1 === 0) {
								self.risk_task = [];
								self.dataEmpty1 = true;
							} else {
								self.risk_task = pagingData(
									self.tableData1,
									self.dataCount1,
									self.currentPage1,
									self.currentSize1
								);
							}
						} else if(response.data.code === 403) {
							self.$message.error('您暂无权限，请先申请权限')
							self.$router.push({
								path: '/#/'
							})
						}
					}
				})
				.catch(function (err) {
					console.log(err);
				});
		},
		beforeUpload(file) {
      		let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
			const isExcel = extension == "xlsx" || extension == "xls" || extension == "csv"
			this.loading = true
			if (!isExcel) {
				this.$message.warning("文件格式不对（只支持.xlsx|.xls|.csv文件）");
			}
		},
		handleChange(file, fileList) {
			this.fileList = fileList;
		},
		uploadSuccess() {
			var self = this
			self.$message.success('上传成功')
			const dates = DateUtil.getNowDay()
			self.loading = false
			self.init_datas(dates);
		},
		uploadFail() {
			var self = this
			self.loading = false
			self.$message.error('上传失败')
		}
	},
	mounted() {
		const dates = DateUtil.getNowDay()
		this.init_datas(dates);
	},
};
</script>
<style lang="scss" scoped>
	.form{
		position: relative;
		margin-bottom: 20px;
		.search{
			position: absolute;
			top: 0;
			right: 0;
			height: 100%;
		}
	}
	.group-width{
        display: flex;
        flex-wrap: nowrap;
    }
    .marFlex{
        margin: auto;
    }
    .mar-l{
        margin-left: 30px;
    }
    .mar-row{
		// margin-bottom: 30px;
		margin-top: 14px;
    	margin-bottom: 14px;
    }
    .select{
        width: 40%;
    }
    .border{
        box-sizing: content-box;
        height: 0;
        overflow: visible;
        margin-top: 1rem;
        margin-bottom: 1rem;
        border: 0;
        border-top: 1px solid rgba(0,0,0,.1);
    }
    .form-control {
        background-color: #FFFFFF;
        background-image: none;
        border: 1px solid #e5e6e7;
        border-radius: 1px;
        color: inherit;
        display: block;
        padding: 6px 12px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        width: 100%;
        font-size: 0.9rem;
        box-shadow: none;
    }
    label{
        color: rgb(103, 106, 108);
        font-weight: normal;
    }
    .mr-1, .mx-1 {
        margin-right: 1.58rem;
        margin-left: 2.1rem;
        /* padding-left: 2rem; */
    }
    .ml-3, .mx-3 {
        margin-left: 1rem!important;
    }
    .mr-4{
        width: 40%;
    }
    .ml-2{
        float: right;
        margin-right: 4%;
    }
    .col-form-label {
        padding-top: calc(.375rem + 1px);
        padding-bottom: calc(.375rem + 1px);
        margin-bottom: 0;
        font-size: inherit;
        line-height: 1.5;
        font-size: 15px;
    }
    label {
        display: inline-block;
        margin-bottom: .5rem;
    }
    .cancelFlex, .cancelFlexDepart{
        margin: auto 15px;   
    }
</style>
